<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>刮刮乐</title>
    <style type="text/css">
        #c1 {
            /* border: 1px solid blue; */
            position: absolute;
        }

        #c2 {
            border: 1px solid red;
        }

        body {
            position: relative;
        }

        html,
        body {
            -webkit-overflow-scrolling: auto;
        }
    </style>
</head>

<body>
    <canvas id="c1" width="1728" height="2304"></canvas>
    <canvas id="c2" width="1728" height="2304"></canvas>
</body>
<script type="text/javascript">
    // let clientWidth = document.body.clientWidth;
    let clientWidth = 1728;

    console.log(clientWidth, '--1');
    var c1 = document.getElementById('c1');
    var c2 = document.getElementById('c2');

    var ctx1 = c1.getContext('2d');
    var ctx2 = c2.getContext('2d');

    let allheight = clientWidth * 1.75;
    // c1.width = clientWidth;
    // c1.height = allheight;
    // c2.width = clientWidth;
    // c2.height = allheight;

    // 绘制图片到底层  canvas2
    var imgs = new Image();
    imgs.src = 'img/hao.jpg';
    imgs.onload = function () {
        ctx2.drawImage(this, 0, 0);
    };

    // 涂层绘制到顶层(即覆盖膜)  canvas1
    ctx1.fillStyle = 'lightgray';
    ctx1.fillRect(0, 0, 1728, 2304);

    ctx1.font = 'normal 80px 仿宋';
    ctx1.strokeStyle = 'slateblue';
    ctx1.strokeText('请刮开！', 320, 750);

    let isPhone = IsPhoneFn();
    let startY,
        endY,
        isScroll = false;
    // 组织浏览器橡皮筋效果
    document.body.addEventListener(
        'touchmove',
        function (e) {
            // if (isScroll) return;
            e.preventDefault();
        },
        { passive: false }
    );
    console.log('检测缓存1');
    // 监听canvas的onmousedown事件
    if (isPhone) {
        c1.addEventListener('touchmove', touchMoveEvent, {
            passive: false,
        });
        function touchMoveEvent(e) {
            // console.log(e, '--1', event);
            e.preventDefault();
            mouseX = event.touches[0].pageX;
            mouseY = event.touches[0].pageY;

            // console.log(e);
            var w = 100; // 清除区域的宽度
            var h = 100; // 清除区域的高度
            var x = mouseX - c1.offsetLeft - w / 2; // 清除区域的x位置
            var y = mouseY - c1.offsetTop - h / 2; // 清除区域的y位置
            ctx1.clearRect(x, y, w, h);
        }
    } else {
        c1.onmousedown = function (ev) {
            c1.onmousemove = function (e) {
                // console.log(e);
                var w = 50; // 清除区域的宽度
                var h = 50; // 清除区域的高度
                var x = e.pageX - c1.offsetLeft - w / 2; // 清除区域的x位置
                var y = e.pageY - c1.offsetTop - h / 2; // 清除区域的y位置
                ctx1.clearRect(x, y, w, h);
            };
        };
        c1.onmouseup = function (ev) {
            // 取消onmousemove事件
            c1.onmousemove = null;
        };
    }

    //
    function IsPhoneFn() {
        //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
        let info = navigator.userAgent;
        //通过正则表达式的test方法判断是否包含“Mobile”字符串
        let isPhone = /mobile/i.test(info);
        //如果包含“Mobile”（是手机设备）则返回true
        return isPhone;
    }
</script>

</html>